<template>
  <div class="wh-graph-editor-content">
    <tools ref="tools" />
    <work id="wh-graph-editor-container" />
  </div>
</template>

<script>
import work from './work/index.vue'
import tools from './tools/index.vue'
import { Graph, Shape } from '@antv/x6';
export default {
  components: {
    work,
    tools
  },
  data() {
    return {
      graph: null,
      grid: {
        size: 10,
        visible: true,
        type: 'dot', // 'dot' | 'fixedDot' | 'mesh'
        args: {
          color: '#a0a0a0', // 网格线/点颜色
          thickness: 1 // 网格线宽度/网格点大小
        }
      }
    }
  },
  mounted() {

    this.initGraph()
  },
  methods: {
    handleToggleSection (type) {
      this.$refs.tools.handleToggleSection(type)
    },
    changeGrid (grid) {
      this.graph.drawGrid(grid)
    },
    initGraph() {
      this.graph = new Graph({
        container: document.getElementById('wh-graph-editor-container'),
        autoResize: true,
        panning: true,
        grid: this.grid,
        scroller: true,
        // minimap: {
          
        // },
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          minScale: 0.5,
          maxScale: 3,
        },
        connecting: {
          router: {
            name: 'manhattan',
            // args: {
            //   padding: 1,
            // },
          },
          connector: {
            name: 'rounded',
            args: {
              radius: 8,
            },
          },
          anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: {
            radius: 20,
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: {
                    name: 'block',
                    width: 12,
                    height: 8,
                  },
                },
              },
              zIndex: 0,
            })
          },
          validateConnection({ targetMagnet }) {
            return !!targetMagnet
          },
        },
        highlighting: {
          magnetAdsorbed: {
            name: 'stroke',
            args: {
              attrs: {
                fill: '#5F95FF',
                stroke: '#5F95FF',
              },
            },
          },
        },
        resizing: true,
        rotating: true,
        translating: true,
        background: {
          color: '#F2F7FA',
        },
        history: true,
        snapline: true,
      })
      this.$emit('loadedGraph', this.graph)
      // 控制连接桩显示/隐藏
      this.graph.on('node:mouseenter', () => {
        console.log('鼠标移入');
        const container = document.getElementById('wh-graph-editor-container')
        const ports = container.querySelectorAll(
          '.x6-port-body',
        )
        this.showPorts(ports, true)
      })
      this.graph.on('node:mouseleave', () => {
        console.log('鼠标移出');
        const container = document.getElementById('wh-graph-editor-container')
        const ports = container.querySelectorAll(
          '.x6-port-body',
        )
        this.showPorts(ports, false)
      })
      // #region 快捷键与事件
      // copy cut paste
      this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.copy(cells)
        }
        return false
      })
      this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.cut(cells)
        }
        return false
      })
      this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
        if (!this.graph.isClipboardEmpty()) {
          const cells = this.graph.paste({ offset: 32 })
          this.graph.cleanSelection()
          grthis.graphaph.select(cells)
        }
        return false
      })

      //undo redo
      this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
        return false
      })
      this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }
        return false
      })

      // select all
      this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
        const nodes = this.graph.getNodes()
        if (nodes) {
          this.graph.select(nodes)
        }
      })

      //delete
      this.graph.bindKey('backspace', () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.removeCells(cells)
        }
      })

      // zoom
      this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
        const zoom = this.graph.zoom()
        if (zoom < 1.5) {
          this.graph.zoom(0.1)
        }
      })
      this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
        const zoom = this.graph.zoom()
        if (zoom > 0.5) {
          this.graph.zoom(-0.1)
        }
      })
    },
    showPorts (ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    }
  },
}
</script>

<style scoped lang="scss">
  .wh-graph-editor-content {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>
